<template>
  <div>
    child2组件 - {{ name2 }}今年{{ age }}岁,性别是{{
      sex === 1 ? "男" : "女"
    }},住{{ address }}, - {{ num2 }}
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      str: "牛田社区",
      num: 3,
    };
  },

  // computed: {
  //   name() {
  //     return this.$store.state.name;
  //   },
  //   age() {
  //     return this.$store.state.age;
  //   },
  //   sex() {
  //     return this.$store.state.sex;
  //   },
  // },

  // 里面可以接受一个数组
  // computed: mapState(["name", "age", "sex"]),

  // 也可以接受一个对象
  // 可以改变变量的名字了,做额外计算了
  // computed: mapState({
  //   name2: "name",
  //   age: (state) => state.age * 2,
  //   sex: "sex",
  //   // 如果要用到this，要换成普通函数
  //   address(state) {
  //     return state.address + this.str;
  //   },
  // }),
  // computed: {
  //   num2() {
  //     return this.num + 1;
  //   },
  // },

  // 当组件自己有计算属性，同时使用了辅助函数mapState，需要合并使用展开运算符
  computed: {
    ...mapState({
      name2: "name",
      age: (state) => state.age * 2,
      sex: "sex",
      // 如果要用到this，要换成普通函数
      address(state) {
        return state.address + this.str;
      },
    }),
    num2() {
      return this.num + 1;
    },
  },
};
</script>
